<template>
    <div class="container">
        <a-card title="成品出库">
            <div class="tool-bar">
                <span>品名：</span>
                <a-input-search style="width: 200px;margin-right: 10px" @search="handleChange" allowClear v-model="searchName"></a-input-search>
                <span>状态：</span>
                <a-select style="width: 200px;margin-right: 10px" v-model="searchStatus" @change="handleChange" allowClear>
                    <a-select-option v-for="item in areaList" :key="item.id" :value="item.type">{{item.type}}</a-select-option>
                </a-select>
                <span>客户：</span>
                <a-select style="width: 200px;margin-right: 10px" v-model="searchCustomer" @change="handleChange" allowClear>
                    <a-select-option v-for="item in areaList" :key="item.id" :value="item.type">{{item.type}}</a-select-option>
                </a-select>
                <a-button type="primary" @click="getTableData">查询</a-button>
                <a-button type="default" @click="reset">重置</a-button>
                <a-button style="float: right" type="primary" @click="add">新增出库</a-button>
            </div>
            <div class="table">
                <a-table
                    bordered
                    :loading="tableOption.loading"
                    :rowKey="(item,i)=>item.id"
                    :columns="tableOption.columns"
                    :data-source="tableOption.tableData"
                    :pagination="tableOption.pagination">
                    <template slot="action" slot-scope="text, record, index">
                        <div>
                            <a-button v-if="record.status == 1" style="margin-right: 10px" type="primary" @click="subAudit(record)">提交审核</a-button>
                            <a-button v-if="record.status == 3" style="margin-right: 10px" type="primary" @click="goScheduling(record)">审核</a-button>
                            <a-button v-if="record.status == 4" style="margin-right: 10px" type="primary" @click="overrule(record)">驳回理由</a-button>
                            <a-button v-if="record.status == 4" style="margin-right: 10px" type="primary" @click="goScheduling(record)">重新入库</a-button>
                            <a-button v-if="record.status == 1" style="margin-right: 10px" type="primary" @click="edit(record)">编辑</a-button>
                            <a-button style="margin-right: 10px" type="primary" @click="detailView(record)">详情</a-button>
                            <a-popconfirm v-if="record.status == 1" title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteRecord(record)">
                                <a-button style="margin-right: 10px" type="danger">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <a-modal v-model:visible="auditModalOption.visible" width="400px" okText="确定" cancelText="取消" @ok="auditModalOption.onOk" @cancel="auditModalOption.onCancel">
            <a-result :status="auditModalOption.status" :title="auditModalOption.title"></a-result>
        </a-modal>
        <a-modal v-model:visible="overruleModalOption.visible" width="600px" okText="确定" cancelText="取消" @ok="overruleModalOption.onOk" @cancel="overruleModalOption.onCancel">
            <h2 style="text-align: center;margin:40px 0">驳回理由</h2>
            <a-textarea :rows="4" v-model="overruleModalOption.value" placeholder="请输入驳回理由"></a-textarea>
        </a-modal>
        <a-modal
            :width="addModalOption.width"
            v-model:visible="addModalOption.visible"
            :title="addModalOption.title"
            @ok="addModalOption.onOk"
            @cancel="addModalOption.onCancel"
            okText="确定"
            cancelText="取消">
            <a-form-model ref="form" :model="addModalOption.formData" :rules="addModalOption.rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <div style="display: flex;flex-wrap: wrap">
                    <a-form-model-item style="width: 50%;" label="选择客户" prop="customer">
                        <a-select style="width: 200px;" v-model:value="addModalOption.formData.customer" placeholder="请选择客户">
                            <a-select-option v-for="item in addModalOption.customerList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item style="width: 50%;" label="操作人" prop="operator">
                        <a-input style="width: 200px;" v-model:value="addModalOption.formData.operator" placeholder="请选择操作人" />
                    </a-form-model-item>
                    <a-form-model-item style="width: 100%;" prop="isSingle">
                        <a-radio-group style="margin-left: 40px" v-model:value="addModalOption.formData.isSingle" @change="isSingleChange">
                            <a-radio value="1">单批发送</a-radio>
                            <a-radio value="2">多批次发送</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item style="width: 50%;" v-if="addModalOption.formData.isSingle == 1" label="选择批次" prop="productBatch">
                        <a-select style="width: 200px;" v-model:value="addModalOption.formData.productBatch" placeholder="请选择批次" @change="batchChange">
                            <a-select-option v-for="item in addModalOption.batchList" :key="item.batch" :value="item.batch">{{item.batch}}-{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item style="width: 50%;" v-if="addModalOption.formData.isSingle == 2" label="选择批次" prop="productBatch">
                        <a-select style="width: 200px;" mode="multiple" v-model:value="addModalOption.formData.productBatch" placeholder="请选择批次" @change="multipleBatchChange">
                            <a-select-option v-for="item in addModalOption.batchList" :key="item.batch" :value="item.batch">{{item.batch}}-{{item.name}}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label-col="{ span: 3 }" style="width: 100%;" label="品名" prop="name">
                        <span>{{addModalOption.formData.name}}</span>
                    </a-form-model-item>
                    <a-form-model-item style="width: 50%;" label="发送数量" prop="sendNumber">
                        <a-input-number style="width: 200px;margin-right: 10px" v-model:value="addModalOption.formData.sendNumber" placeholder="请输入发送数量"/>袋
                    </a-form-model-item>
                    <a-form-model-item v-if="addModalOption.formData.isSingle == 1" style="width: 50%;" label="装量" prop="fillVolume">
                        <span>{{addModalOption.formData.fillVolume}}g</span>
                    </a-form-model-item>
                    <a-form-model-item v-if="addModalOption.formData.isSingle == 2" style="width: 50%;" label="总数量" prop="totalFillVolume">
                        <span>{{addModalOption.formData.totalFillVolume}}g</span>
                    </a-form-model-item>
                </div>
            </a-form-model>
        </a-modal>
        <a-modal
            width="80%"
            v-model:visible="detailModalOption.visible"
            title="详情"
            @ok="detailModalOption.onOk"
            @cancel="detailModalOption.onCancel"
            okText="通过"
            cancelText="驳回">
            <div class="info-box">
                <a-descriptions>
                    <a-descriptions-item label="品名">
                        <span class="bold">川芎</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="物料代码">
                        <span class="bold">1810000000</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="出库批号">
                        <span class="bold">233302</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="发送数量">
                        <span class="bold">200袋</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="装量">
                        <span class="bold">10g</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="总数量">
                        <span class="bold">1000g</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="出库类型">
                        <span class="bold">发送类型</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="客户">
                        <span class="bold">天津医院</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="出库时间">
                        <span class="bold">2024/09/09</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="驳回理由">
                        <span class="bold">拒绝出库</span>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
            <div class="item-box">
                <h3>出库记录</h3>
                <a-table bordered :loading="detailModalOption.outPutsRecordTableOption.loading" :rowKey="(item,i)=>item.id" :columns="detailModalOption.outPutsRecordTableOption.columns" :data-source="detailModalOption.outPutsRecordTableOption.tableData" :pagination="detailModalOption.outPutsRecordTableOption.pagination"></a-table>
            </div>
        </a-modal>

    </div>
</template>

<script>
import {h} from 'vue'
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import handleRequest from "@/utils/handleRequest";
export default {
    name: "productOutbound",
    data() {
        return {
            locale,
            areaList:[],
            searchName:'',
            searchStatus:'',
            searchCustomer:"",
            tableOption:{
                tableData:[
                    {
                        id:1,
                        name:'焦麦芽',
                        addDate:'2024/08/23',
                        outputsDate:'2024/08/24',
                        type:'发送出库',
                        batch:'SY0326597257',
                        outputsNumber:'300',
                        customer:'天津医院',
                        operator:'张三',
                        isSingle:'1',
                        productBatch:'SY132488179635',
                        status:'1', // 1 待出库 2 已出库 3 待审核 4 已驳回
                    },
                    {
                        id:13,
                        name:'焦麦芽初版',
                        addDate:'2024/08/23',
                        outputsDate:'2024/08/24',
                        type:'发送出库',
                        batch:'SY0326597257',
                        outputsNumber:'300',
                        customer:'天津医院',
                        operator:'张三',
                        isSingle:'2',
                        productBatch:['SY132488179635','SY22262815974'],
                        status:'1', // 1 待出库 2 已出库 3 待审核 4 已驳回
                    },
                    {
                        id:2,
                        name:'焦麦芽',
                        addDate:'2024/08/23',
                        outputsDate:'2024/08/24',
                        type:'发送出库',
                        batch:'SY0326597257',
                        outputsNumber:'300',
                        customer:'天津医院',
                        operator:'张三',
                        isSingle:'2',
                        status:'2', // 1 待出库 2 已出库 3 待审核 4 已驳回
                    },
                    {
                        id:3,
                        name:'焦麦芽',
                        addDate:'2024/08/23',
                        outputsDate:'2024/08/24',
                        type:'发送出库',
                        batch:'SY0326597257',
                        outputsNumber:'300',
                        customer:'天津医院',
                        operator:'张三',
                        isSingle:'1',
                        status:'3', // 1 待出库 2 已出库 3 待审核 4 已驳回
                    },
                    {
                        id:4,
                        name:'焦麦芽',
                        addDate:'2024/08/23',
                        outputsDate:'2024/08/24',
                        type:'发送出库',
                        batch:'SY0326597257',
                        outputsNumber:'300',
                        customer:'天津医院',
                        operator:'张三',
                        isSingle:'1',
                        status:'4', // 1 待出库 2 已出库 3 待审核 4 已驳回
                    },
                ],
                columns:[
                    {
                        title: '序号',
                        dataIndex: 'index',
                        key: 'index',
                        align: 'center',
                        customRender: (text,record,index) => `${index+1}`,
                    },
                    {
                        align: 'center',
                        dataIndex:'name',
                        key:'name',
                        title:'品名',
                    },
                    {
                        align: 'center',
                        dataIndex: 'addDate',
                        key: 'addDate',
                        title:'添加时间',
                        customRender:(text,record,index)=>{
                            return this.$dateFormat(record.addDate,'y-m-d h:M:s')
                        }
                    },
                    {
                        align: 'center',
                        dataIndex: 'outputsDate',
                        key: 'outputsDate',
                        title:'出库时间',
                        customRender:(text,record,index)=>{
                            return  record.outputsDate ? this.$dateFormat(record.outputsDate,'y-m-d h:M:s'):'➖'
                        }
                    },
                    {
                        align: 'center',
                        dataIndex: 'type',
                        key: 'type',
                        title:'出库类型',
                    },
                    {
                        align: 'center',
                        dataIndex: 'batch',
                        key: 'batch',
                        title:'出库批号',
                    },
                    {
                        align: 'center',
                        dataIndex: 'outputsNumber',
                        key: 'outputsNumber',
                        title:'出库数量',
                        customRender:(text,record)=>{
                            return record.outputsNumber+'kg'
                        }
                    },
                    {
                        align: 'center',
                        dataIndex: 'customer',
                        key: 'customer',
                        title:'客户',
                    },
                    {
                        align: 'center',
                        dataIndex: 'operator',
                        key: 'operator',
                        title:'操作人',
                    },
                    {
                        align: 'center',
                        dataIndex: 'status',
                        key: 'status',
                        title:'状态',
                        customRender:(text,record)=>{
                            switch (record.status){
                                case '1':
                                    return '待出库'
                                case '2':
                                    return '已出库'
                                case '3':
                                    return '待审核'
                                case '4':
                                    return '已驳回'
                                default:
                                    return '未知'
                            }
                        }
                    },
                    {
                        align: 'center',
                        dataIndex: 'action',
                        key: 'action',
                        title:'操作',
                        scopedSlots:{customRender:'action'},
                    },


                ],
                loading:false,
                pagination:{
                    pageSize:10,
                    current:1,
                    total:0,
                    showTotal:(total)=>`共${total}条`,
                    onChange:(page,pageSize)=>this.pageChange(page,pageSize)
                },
            },
            auditModalOption:{
                visible:false,
                status:'info',
                title:'是否提交审核',
                data:{},
                onOk:()=>{
                    this.modalOk()
                },
                onCancel:()=>{
                    this.auditModalOption.visible = false
                },
            },
            overruleModalOption:{
                visible:false,
                value:'',
                onOk:()=>{
                    this.overruleModalOk()
                },
                onCancel:()=>{
                    this.overruleModalOption.visible = false
                },
            },
            addModalOption:{
                width:900,
                title: '新增',
                customerList:[
                    {
                        name:'天津医院',
                        id:'1',
                    },
                    {
                        name:'上海医院',
                        id:'2',
                    },
                ],// 客户列表
                batchList:[
                    {
                        name:'川芎',
                        batch:'SY132488179635',
                        fillVolume:'20',
                    },
                    {
                        name:'枸杞',
                        batch:'SY22262815974',
                        fillVolume:'32',
                    },
                ],// 批次列表
                formData:{
                    customer:'',// 客户名称
                    operator:'',// 操作人
                    isSingle:'1',// 1 单批次 2 多批次
                    productBatch:null,// 批次
                    name:'',// 品名
                    sendNumber:'',// 发送数量
                    fillVolume:'',// 填装量
                    totalFillVolume:'',// 总填装量
                },
                rules:{
                    customer:[
                        {required: true, message: '请选择客户名称'},
                    ],
                    operator:[
                        {required: true, message: '请输入操作人'},
                    ],
                    productBatch:[
                        {required: true, message: '请选择批次'},
                    ],
                    sendNumber:[
                        {required: true, message: '请输入发送数量'},
                    ],
                },
                visible:false,
                onOk:()=>{
                    this.addModalOk()
                },
                onCancel:()=>{
                    this.addModalOption.visible = false
                },
            },
            detailModalOption:{
                visible:false,
                id:'',
                data:{},
                outPutsRecordTableOption:{
                    columns:[
                        {
                            align: 'center',
                            dataIndex:'date',
                            key:'date',
                            title:'出库时间',
                        },
                        {
                            align: 'center',
                            dataIndex:'type',
                            key:'type',
                            title:'出库类型',
                        },
                        {
                            align: 'center',
                            dataIndex:'batch',
                            key:'batch',
                            title:'出库批号',
                        },
                    ],
                    loading:false,
                    tableData:[
                        {
                            date:'2021-08-01',
                            type:'出库',
                            batch:'2021-08-01-001',
                            outputsNumber:'100kg',
                            operator:'张三',
                            realTimeStorage:'100kg',
                        },
                    ],
                    pagination:{
                        pageSize:10,
                        current:1,
                        total:0,
                        showTotal:(total)=>`共${total}条`,
                        onChange:(page,pageSize)=>this.outputsTablePageChange(page,pageSize)
                    },
                },
                onOk:()=>{
                    this.detailModalOk()
                },
                onCancel:()=>{
                    this.detailModalOption.visible = false
                },
            }
        }
    },
    mounted() {
        this.getTableData()
        this.getAreaList()
    },
    methods: {
        handleChange(){
            this.getTableData()
        },
        //单批次多批次选择
        isSingleChange({target}){
            let value = target.value
            //当从多选切会单选时默认选中第一个批次
            if(value == 1) {
                this.addModalOption.formData.productBatch = this.addModalOption.batchList[0].batch
                this.addModalOption.formData.name = this.addModalOption.batchList[0].name
                this.addModalOption.formData.fillVolume = this.addModalOption.batchList[0].fillVolume
            }else{
                //单选切到多选找寻当前单选的批次号那条数据的装量
                this.addModalOption.formData.totalFillVolume = this.addModalOption.batchList.find(item=>item.batch==this.addModalOption.formData.productBatch).fillVolume
            }
        },
        //单批次列表切换
        batchChange(value){
            this.addModalOption.formData.name = this.addModalOption.batchList.find(item=>item.batch==value).name
            this.addModalOption.formData.fillVolume = this.addModalOption.batchList.find(item=>item.batch==value).fillVolume
        },
        //多批次列表切换
        multipleBatchChange(value){
            console.log(value)
            this.addModalOption.formData.name = value.map(item=>this.addModalOption.batchList.find(item2=>item2.batch==item).name).join(',')
            this.addModalOption.formData.totalFillVolume = value.reduce((pre,cur)=>{
                return pre + this.addModalOption.batchList.find(item=>item.batch==cur).fillVolume*1
            },0)
        },
        reset(){
            this.searchName = ''
            this.searchStatus = ''
            this.searchCustomer = ''
            this.getTableData()
        },
        //新增弹窗
        add(){
            //重置表单数据
            this.addModalOption.formData = {
                customer:'',// 客户名称
                operator:'',// 操作人
                isSingle:'1',// 1 单批次 2 多批次
                productBatch:null,// 批次
                name:'',// 品名
                sendNumber:'',// 发送数量
                fillVolume:'',// 填装量
                totalFillVolume:'',// 总填装量
            }
            setTimeout(()=>{
                //默认选择第一个批次
                this.addModalOption.formData.productBatch = this.addModalOption.batchList[0].batch
                this.addModalOption.formData.name = this.addModalOption.batchList[0].name
                this.addModalOption.formData.fillVolume = this.addModalOption.batchList[0].fillVolume
            },500)
            this.addModalOption.visible = true
        },
        //编辑弹窗
        edit(params){
            console.log(params)
            this.addModalOption.title = '编辑'
            this.addModalOption.visible = true
            this.addModalOption.formData = params
            //显示装量
            if(params.isSingle == 1){
                this.addModalOption.formData.fillVolume = this.addModalOption.batchList.find(item=>item.batch==params.productBatch).fillVolume
            }else{
                //根据params数据中的批次找寻批次列表中的数据计算总装量
                this.addModalOption.formData.totalFillVolume = params.productBatch.reduce((pre,cur)=>{
                    return pre + this.addModalOption.batchList.find(item=>item.batch==cur).fillVolume*1
                },0)
            }
        },
        addModalOk(){
            this.$refs.form.validate(async valid=>{
                if(valid){
                    console.log('submit',this.addModalOption.formData)
                }
            })
        },
        //查看详情
        detailView(params){
            this.detailModalOption.id = params.id
            this.detailModalOption.visible = true
        },
        detailModalOk(){

        },
        async getAreaList(){
            // this.areaList = handleRequest(await getAllArea())
        },
        //提交审核
        subAudit(params){
            this.auditModalOption.data = params
            this.auditModalOption.status = 'info'
            this.auditModalOption.title = '是否提交审核'
            this.auditModalOption.visible = true
        },
        modalOk(){
            console.log('submit',this.auditModalOption.data)
            this.auditModalOption.status = 'success'
            this.auditModalOption.title = '提交成功'
            setTimeout(()=>{
                this.auditModalOption.visible = false
                this.getTableData()
            },500)
        },
        //驳回
        overrule(){
            this.overruleModalOption.visible = true
        },
        overruleModalOk(){
            console.log('overrule',this.overruleModalOption.value)
            setTimeout(()=>{
                this.overruleModalOption.visible = false
                this.$message.success('驳回成功')
                this.getTableData()
            },500)
        },
        async getTableData(){
            let params = {
                username:this.searchStatus,
                type:this.searchCustomer,
                date:this.searchName,
                pageNum:this.tableOption.pagination.current,
                pageSize:this.tableOption.pagination.pageSize,
            }
            // let data = handleRequest(await getScheduleList(params))
            // // this.tableOption.tableData = data.records
            // this.tableOption.pagination.total = data.total
            // console.log(this.tableOption.tableData)
        },
        pageChange(page,pageSize){
            this.tableOption.pagination.current = page
            this.getTableData()
        },
        outputsTablePageChange(page,pageSize){
            this.detailModalOption.outPutsRecordTableOption.pagination.current = page
        },
    },
}
</script>
<style scoped lang="scss">
.container{
    padding: 20px;
    .tool-bar{
        button{
            margin-left: 10px;
        }
    }
    .table{
        margin-top: 20px;
    }
}
.info-box{
    padding: 10px;
    border: 1px solid rgba(70, 70, 70, 0.11);
}
</style>
